<template>
  <Layout style="height: 100%" class="main">
    <Header class="header-con">
      <header-bar :list="tagNavList">
        <user @modifypass="showModifyPass" />
      </header-bar>
    </Header>
      <Content class="home main-content-con">
        <Layout class="main-layout-con">
          <Content class="home content-wrapper" :style="{'min-height': minHei + 'px'}">
            <keep-alive>
              <router-view/>
            </keep-alive>
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
      <Modal
        v-model="visible"
        title="修改密码"
        @on-visible-change="handleChange"
        :footer-hide="true">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="85">
          <FormItem label="旧密码：" prop="oldpassword">
                <Input v-model="formValidate.oldpassword" placeholder="请输入" :maxlength="16" @on-keyup="filterSpace1" class="Row_content_input" type="password"></Input>
          </FormItem>
          <FormItem label="新密码：" prop="newpassword">
                <Input v-model="formValidate.newpassword" placeholder="请输入" :maxlength="16" @on-keyup="filterSpace2" class="Row_content_input" type="password"></Input>
          </FormItem>
           <FormItem label="确认密码：" prop="confirmpassword">
                <Input v-model="formValidate.confirmpassword" placeholder="请输入" :maxlength="16" @on-keyup="filterSpace3" class="Row_content_input" type="password"></Input>
          </FormItem>
          <FormItem class="form-btn" style="text-align:right;">
              <Button @click="handleCancel" style="width:60px;height:32px;">取消</Button>
              <Button type="primary" @click="handleModifyPass" style="width:60px;height:32px;margin-left:20px">确定</Button>
          </FormItem>
        </Form>
    </Modal>
  </Layout>
</template>
<script>
import HeaderBar from './components/header-bar'
import User from './components/user'
import ABackTop from './components/a-back-top'
import routers from '@/router/routers'
import { hex_md5 } from '@/libs/md5'
import { setPasswordUpdate } from '@/api/system/employee.js'
import { mapMutations, mapActions } from 'vuex'
import './main.less'
export default {
  name: 'Main',
  components: {
    HeaderBar,
    User,
    ABackTop
  },
  data () {
    return {
      visible: false,
      minHei: '',
      formValidate: {
        oldpassword: '',
        newpassword: '',
        confirmpassword: ''
      },
      ruleValidate: {
        oldpassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newpassword: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('新密码不能为空'))
              } else if (value.length < 8) {
                callback(new Error('密码长度在8-16位之间'))
              } else if (value === this.formValidate.oldpassword) {
                callback(new Error('新密码不能与旧密码相同'))
              } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(value)) {
                callback(new Error('密码必须要有字母大小写加数字,支持特殊字符'))
              } else {
                callback()
              }
            }
          }
        ],
        confirmpassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { min: 8, message: '确认密码不能小于8位', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    tagNavList () {
      return this.$store.state.app.tagNavList
    }
  },
  methods: {
    ...mapMutations([
      'setTagNavList',
      'addTag',
      'setHomeRoute'
    ]),
    ...mapActions([
      'getUnreadMessageCount'
    ]),
    filterSpace1 () {
      this.formValidate.oldpassword = this.formValidate.oldpassword.replace(/\s+/g, '')
    },
    filterSpace2 () {
      this.formValidate.newpassword = this.formValidate.newpassword.replace(/\s+/g, '')
    },
    filterSpace3 () {
      this.formValidate.confirmpassword = this.formValidate.confirmpassword.replace(/\s+/g, '')
    },
    showModifyPass () {
      this.visible = true
    },
    handleChange () {
      this.$refs.formValidate.resetFields()
    },
    handleModifyPass () {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          if (this.formValidate.confirmpassword === this.formValidate.newpassword) {
            setPasswordUpdate({
              'merchantId': this.$store.state.user.merchantId,
              'id': this.$store.state.user.userId,
              'oldPassword': hex_md5(this.formValidate.oldpassword), // 初始默认为123456
              'password': hex_md5(this.formValidate.confirmpassword),
              'orgId': this.$store.state.user.orgId
            }).then((res) => {
              if (res.data.status === 200) {
                this.$Message.success('重置成功！')
                this.visible = false
              } else {
                this.$Message.error(`${res.data.message}`)
              }
            })
          } else {
            this.$Message.error('两次输入的密码不一致')
          }
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.$refs.formValidate.resetFields()
    }
  },
  mounted () {
    this.setTagNavList()
    this.setHomeRoute(routers)
    if (this.$route.name === 'global_setting_page') {
      this.$route.meta.title = global_setting_titles[this.$route.params.id]
    }
    if (this.$route.name === 'store_setting_page') {
      this.$route.meta.title = store_setting_titles[this.$route.params.id]
    }
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    // 获取未读消息条数
    this.getUnreadMessageCount()
    let _this = this
    this.minHei = (document.documentElement.clientHeight || document.body.clientHeight) - 104
    window.onresize = function () {
      _this.minHei = (document.documentElement.clientHeight || document.body.clientHeight) - 104
    }
  }
}
</script>
<style scoped>
.main .main-content-con {
  margin-top:64px;
}
</style>
